<template>
	<view>
		<view class="list">
			<!--  -->
			<view class="item" v-for="item in data" :key="item.id">
				<image :src="item.scene_pic_url" mode="widthFix"></image>
				<view class="white">
					<view class="txt1">{{ item.title }}</view>
					<view class="txt2">{{ item.subtitle }}</view>
					<view class="txt3">{{ item.price_info | toPrice }} 起</view>
				</view>
			</view>
			<view class="btn">
				<button :class="active == '2' ? 'active' : ''" @tap="change(1)">上一页</button>
				<button :class="active == '1' ? 'active' : ''" @tap="change(2)">下一页</button>
			</view>
		</view>
		<tab></tab>
	</view>
</template>

<script>
import tab from '@/custom-tab-bar/index.vue';
import { mapMutations } from 'vuex';
import { Apitopic, searchApi, goodsApi } from '../../utils/api.js';
export default {
	components: {
		tab
	},
	data() {
		return {
			data: [],
			count: 0,
			currentPage: 1,
			active: 1
		};
	},
	methods: {
		change(num) {
			console.log(num);
			this.active = num;
			this.get(num);
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
		},
		async get(num) {
			if (num) {
				this.currentPage = num;
			}
			let res = await Apitopic({
				page: this.currentPage,
				size: 10
			});
			console.log(res);
			this.data = res.data.data;
			this.count = res.data.$store;
			this.currentPage = res.data.currentPage;
		}
	},
	onShow() {
		this.$store.commit('changevalue', 1);
		this.get();
		// let token = uni.getStorageSync('token');
		// let searchApires = await searchApi(token);
		// console.log(searchApires);

		// let goodsApires = await goodsApi();
		// console.log(await goodsApi());
	}
};
</script>

<style lang="less">
page {
	background-color: #eee;
}
.list {
	text-align: center;
	image {
		width: 100%;
		display: block;
	}
	.item {
		.white {
			background-color: white;
		}
		margin-bottom: 30rpx;
		view {
			font-size: 36rpx;
			padding: 18rpx 0;
		}
		.txt1 {
		}
		.txt3 {
			color: #9b0000;
			margin-bottom: 20rpx;
		}
	}
	.btn {
		display: flex;
		button {
			width: 50%;
			background-color: #f7f8fa;
			opacity: 0.5;
			cursor: not-allowed;
		}
		.active {
			color: darkred;
			background-color: #fff;
			opacity: 1;
		}
	}
}
</style>
